<template>
  <!--定义外层-->
  <div class="wrapper" ref="wrapper">
    <!--定义需要滚动的内容区域-->
    <ul class="content">
      <slider>
        <li v-for="item in items" :style="{background:item.bg,height:'100px'}">{{item.text}}</li>
      </slider>
    </ul>
  </div>
</template>

<script>
import Slider from '@/components/common/slider/slider'
import Scroll from '@/components/common/scroll/scroll'
// import BScroll from 'better-scroll'
export default {
  data () {
    return {
      items: [
        {
          bg: '#f00',
          text: '第一个'
        },
        {
          bg: '#f90',
          text: '第二个'
        },
        {
          bg: '#360',
          text: '第三个'
        },
        {
          bg: '#630',
          text: '第四个'
        }
      ],
      height: 0
    }
  },
  components: {
    Scroll, Slider
  }
  // methods: {
  // }
}
</script>

<style>
  .wrapper{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #222;
  }

  .content li{
    list-style:none;
    width:100%;
    text-align:center;
    color:#fff;
  }
</style>